<script setup>
import { ref } from 'vue';
import {Toast} from "vant";

const username = ref('');
const password = ref('');

const onSubmit = () => {
  // 在这里处理登录逻辑，可以使用axios等库发送登录请求
  // 示例：假设使用Vant的Toast显示登录成功消息
  Toast.success('登录成功');
};

</script>

<template>
  <div class="login-container">
    <van-form @submit="onSubmit">
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" required />
      <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" required />
      <van-button type="primary" native-type="submit">登录</van-button>
    </van-form>
  </div>
</template>

<style scoped>
.login-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
}
</style>
